<template>
<div class="login-page">
    <validate-form @form-submit="onFormSubmit" action="">
    <div>
      <label class="form-label">邮箱地址</label>
      <validate-input 
      :rules="emailRules" 
      v-model="emailVal" 
      placeholder="请输入邮箱地址"
      type="text"
      ref="inputRef"
      ></validate-input>
  
    </div>
    
    <div class="mb-3">
      <label class="form-label">密码</label>
      <validate-input :rules="passwordRules" v-model="passwordVal" placeholder="请输入邮箱地址" type="password"></validate-input>

     
    </div>
    <template #submit>
      <span class="btn btn-primary" >提交</span>
    </template>
  
   
 
</validate-form>

</div>
</template>
<script lang="ts">
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ValidateInput from '../components/ValidateInput.vue';
import ValidateForm from '../components/ValidateForm.vue';
import { defineComponent ,reactive , ref} from 'vue'
import createMessage from '@/components/createMessage';
interface RuleProp {
    type: 'required' | 'email';
    message: string;
}
type RulesProp = RuleProp[]
export default defineComponent({
  name: 'App',
  components: {

    ValidateInput,
    ValidateForm
  },
  setup(){
    const store = useStore()
    const emailVal = ref('')
    const inputRef = ref('')
    const router = useRouter()
    const passwordVal = ref('')
    const emailRules:RulesProp =[
      {type:'required',message:'电子邮箱地址不能为空'},
      {type:'email',message:'请输入正确的邮箱地址'}
    ]
    const passwordRules:RulesProp=[
      {type:'required',message:'密码不能为空'}
    ]
    const onFormSubmit =(result:boolean) =>{
      // console.log('result',result)
      if(result){
        const payload = {
          email:emailVal.value,
          password:passwordVal.value
        }
        store.dispatch('loginAndFetch',payload).then((data)=>{
         createMessage('登录成功，2s后跳转首页','success')
         setTimeout(()=>{
          router.push('/')
         },2000)
          
        }).catch(e =>{
          console.log(e)
        })
        // store.commit('login')
    
        
      }
    }
    return {
  
      emailRules,
      emailVal,
      passwordRules,
      passwordVal,
      onFormSubmit,
      inputRef

    }
  }
})
</script>